<template>
	<view class="login-form">
		{{$store.state.user.a}}
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" label-width="100" :model="model" :rules="rules" ref="form1">
			<u-form-item label="手机号" prop="userInfo.mobile" borderBottom>
				<u--input v-model="model.userInfo.mobile" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="userInfo.password" borderBottom>
				<u--input v-model="model.userInfo.password" border="none"></u--input>
			</u-form-item>
			<u-button type="primary" @click="submit">提交</u-button>
		</u--form>

	</view>
</template>



<script>
	import {doLogin} from '@/api/user.js'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				model: {
					//  因为如果数据非常复杂 
					userInfo: {
						mobile: '18339413550',
						password: '123456'
					},
					//
				},
				rules: {
					'userInfo.mobile': [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change'],

					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码格式错误',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					'userInfo.password': [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change'],
					
					},{
					    pattern:/^\w{6,12}$/,
						message: '密码格式错误',
						trigger: ['blur', 'change'],
					
					},]
				},

			};
		},
		methods: {
			...mapMutations(['SET_TOKEN']),
			submit() {
				let userInfo = this.model.userInfo
				doLogin(userInfo).then(res => {

					uni.setStorageSync('token',res)
                    uni.showToast({
                    	title:'登陆成功'
                    });
					
					// this.$store.commit('user/SET_TOKEN',res)
					this.SET_TOKEN(res)
					
					
					
					this.$store.dispatch('getUserInfo')
					.then(res=>{
						console.log(res);
						//  判断  mobile是不是绑定
						
						// console.log(this.$store.state.user.userInfo);
						
					})
					
					
					uni.navigateBack()

				}).catch(err => {

				})



			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	};
</script>
<style lang="scss">
	.login-form {
		padding: 0 30rpx;
	}
</style>
